<template>
  <!--页面搭建-杜思成-->
  <layout-card
    v-model="search"
    :filters="ismapOptions"
    headline="信息列表"
    headtitle=" "
    :hasButton="true"
    @search-change="getData"
    @search-reset="searchReset"
  >
    <table-common
      :height="tableHeight"
      :columns="mapListColumns"
      :loading="loading"
      :pagination="pager"
      :table-data="tabledata"
      size="large"
      @current-change="changeCurrent"
      @size-change="changePageSize"
      @sort-change="sortChange"
    >
      <!-- 维护图标提示 -->
      <template #houseName="{ row }">
        <el-text type="primary" v-if="remindList.includes(row.houseId)">
          <img
            src=""
            class="img"
            width="18"
            height="18"
            data-v-fae5bece=""
            style="background-color: red"
          />
        </el-text>
        {{ row["houseName"] }}
      </template>
      <template #action="{ row }">
        <!-- 自定义操作栏示例  -->
        <el-button class="link-btn" @click="handleEdit(row)" link type="primary"
        >恢复</el-button
        >
        <el-popconfirm
          title="是否删除?"
          confirmButtonText="确定"
          cancelButtonText="取消"
          @confirm="() => DeletRow(row)"
        >
          <template #reference>
            <el-button class="link-btns" link type="danger">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </table-common>
  </layout-card>
  <!-- 设置弹窗开始 -->
  <el-dialog v-model="thresholdDialogVisible" title="设置" width="500"   center align-center >
    <span>
      设置删除时间:
    </span>
    <div style="margin-left: 20px">
      <el-radio-group v-model="radio" @change="radioChange">
        <el-radio :label="0">默认</el-radio>
      </el-radio-group>
    </div>
    <div style="margin-left: 20px">
      <el-radio-group v-model="radio" @change="radioChange">
        <el-radio :label="1">自定义</el-radio>
      </el-radio-group>
    </div>
    <div style="margin-left: 80px" v-show="isShow">
      <el-form class="form">
        <el-input
          v-model="input3"
          placeholder=""
          width="150px"
        >
          <template #append>
            <el-select v-model="select" placeholder="天" style="width: 80px">
              <el-option label="天" value="1" />
              <el-option label="月" value="2" />
            </el-select>
          </template>
        </el-input>
      </el-form>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="thresholdDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="thresholdDialogVisible = false">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 设置弹窗结束 -->
</template>

<script lang="ts" setup>
  const tableHeight = ref(window.innerHeight - 440)
  import { Search } from '@element-plus/icons-vue'
  const radio = ref(0)
  const input3 = ref('')
  const select = ref('')
  const isShow = ref(false)
  /**
   * @radioChange 单选框的改变事件
   * @author
   * @date
   * @version V1.0.0
   * @return
   */
  const radioChange = (value: number ,number : boolean)=> {
     // 选中自定义
     if (value == 1) {
       isShow.value = true
     } else { // 选中默认
       isShow.value = false
     }
    console.log(value)
     console.log(isShow.value)
  }
  import { computed, ref, reactive, onBeforeMount, nextTick } from "vue";
  import LayoutCard from "@/components/LayoutCard/index.vue";
  import TableCommon from "@/components/TableCommon/index.vue";
  import {
    serveList
  } from "@/api/secure/recycleUnits";
  import { mapListColumns } from "@/views/systemMonitori/serveMonitor/config/columns";
  import {
    mapOptions,
    dialogOptions,
    mapListFilters,
  } from "@/views/systemMonitori/serveMonitor/config/filters";
  import {
    ElMessage,

  } from "element-plus";

  import FilterBar from "@/components/FilterBar/index.vue";
  import { getResource, postResource } from "@/api/resource";

  import { useStore } from "vuex";
  // 地图控件
  import mapControl from "@/components/map/index.vue";
  import { store } from "@/components/map/mapStore";
  import {usersList} from "@/api/secure/recycleUnits";

  const stores = useStore();
  const organTree = stores.state.user.organTree; // 获取树
  const isdialogOptions = ref(dialogOptions);
  const ismapOptions = ref(mapOptions);
  const ismapListFilters = ref(mapListFilters);
  const thresholdDialogVisible = ref(false);

  const addTilte = ref(""); // 弹出框名称

  // 分页和数据展示参数
  const current = ref(1);
  const pageSize = ref(10);
  const total = ref(0);
  const tabledata = ref([]);
  const search = ref({
    houseType:null,
    region:null,
    state:null
  });
  const pager = computed(() => ({
    currentPage: current.value,
    pageSize: pageSize.value,
    total: total.value,
    pageCount:
      Math.ceil(total.value / pageSize.value) === 0
        ? 1
        : Math.ceil(total.value / pageSize.value),
  }));

  /**
   * @functionName 分页、查询、排序、删除功能
   * @author 杜思成
   * @date 2023-08-08 17:46:09
   * @version V1.0.0
   */
  const changeCurrent = (value: number) => {
    current.value = value;
    getData();
  };
  const changePageSize = (size: number) => {
    pageSize.value = size;
    getData();
  };
  const order = ref([
    {
      column: "state",
      method: "asc",
    },
    {
      column: "lastUpdateTime",
      method: "desc",
    },
  ]);
  /**
   * @functionName 获取数据
   * @author 彭庆楠
   * @date 2023-08-08 17:47:31
   * @version V1.0.0
   * @return
   */
  const getData = async () => {
    const searchList = {
      serveLocation: search.value?.serveLocation,
      askType: search.value?.askType,
    };
    const playout = {
      pageNum: current.value,
      pageSize: pageSize.value,
      condition: searchList,
    };
    await serveList(playout).then((res) => {
      tabledata.value = res?.data?.list;
      total.value = res?.data?.total;
    });
  };
  /**
   * @functionName 排序事件
   * @param {any} data 传入的某一列的列名和升降序
   * @author 彭庆楠
   * @date 2023-08-17 17:48:41
   * @version V1.0.0
   * @return
   */
  const sortChange = (data: any) => {
    const method = data.order === "ascending" ? "asc" : "desc";
    order.value[0].column = data.prop;
    order.value[0].method = method;
    getData();
  };
  // 删除
  const DeletRow = (row: any) => {
    const formData = new FormData();
    formData.append("houseId", row.houseId);
  };

  const handleEdit = async (row: any) => {

  };

  const FilterRef = ref({});

  /**
   * @functionName 重置功能
   * @param {FilterDataType} data
   * @description
   * @author 杜思成
   * @date 2023-08-17 17:55:57
   * @version V1.0.0
   * @return
   */
  const searchReset = (data: FilterDataType) => {
    search.value = data;
    pager.value.currentPage = 1;
    pager.value.pageSize = 10;
    getData();
  };

  onBeforeMount(() => {
    getData();
  });
</script>
<style scoped>

  .form {
    .el-input {
      width: 150px;
    }
  }
  .link-btn {
    color: #2F7DF1;
  }
  .link-btns {
    color: #F24A45;
  }
</style>
